<template>
	<div>
		<!--<div class="top" style="float:left;">-->
			<Tree :data="baseData" style="width:300px" @on-select-change="onCheckChange"></Tree>
		<!--</div>

		<div style="width:750px;float:left">-->
				<Row type="flex">
					<Col span="12">
						<Button type="primary" @click="addData">添加用户</Button>
					    <Button @click="handleSelectAll(true)">设置全选</Button>
				        <Button @click="handleSelectAll(false)">取消全选</Button>
				        <Button @click="removeSelectAll">删除用户</Button>
			        </Col>
					<Col span="12" justify="end" type="flex">
					    <Input v-model="filter.name" style="width:200px">
					        <Button slot="append" icon="ios-search" @click="search"></Button>
					    </Input>
					</Col>
		       	</Row>
			    <Table border :columns="columns7" :data="list" 
			    	border ref="selection"
			    	@on-selection-change="removeSelect"></Table>
				 <Page :total="filter.total" show-elevator show-total size="small" show-sizer @on-page-size-change="onPageSizeChange" :page-size="2" @on-change="changePage"></Page>
			    <Modal
			        v-model="modal1"
			        title="普通的Modal对话框标题"
			        @on-ok="ok"
			        @on-cancel="cancel">
			        
			         <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
				        <FormItem label="标题" prop="title" >
				            <Input v-model="formValidate.title" placeholder="请输入标题"></Input>
				        </FormItem>
				        <FormItem label="作者" prop="author">
				            <Input v-model="formValidate.author" placeholder="请输入姓名"></Input>
				        </FormItem>
				        <FormItem label="副标题" prop="Games">
				            <Input v-model="formValidate.Games" placeholder="请输入副标题"></Input>
				        </FormItem>
				        <FormItem label="内容" prop="content" >
				            <Input v-model="formValidate.content" placeholder="请输入内容"></Input>
				        </FormItem>
				         <FormItem>
					        <Col span="12">
					            <Rate show-text allow-half v-model="valueCustomText">
					                <span style="color: #f5a623">{{ valueCustomText }}</span>
					            </Rate>
					        </Col>
				         </FormItem>
				        <FormItem>
				            <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
				            <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
				        </FormItem>
				    </Form>
			    </Modal>
	    <!--</div>-->
	</div> 
</template> 
<script>
	import News from '../../common/News.js'
	import Case from '../../common/Case.js'
    export default {
    	mixins:[News,Case],
        data () {
            return {
            	module:"news", 
            	module1:"cates",
            	valueText: 3,
                valueCustomText: 3.8
            }
        },
        methods: {
        	handleSubmit (name) {
        	 	if(this.formValidate._id){
	                this.$refs[name].validate((valid) => {
	                    if (valid) {
	                        this.$Message.success('提交成功!');
	                        this.$http({
	                        	method:'POST',
	                        	url:'http://localhost:3000/news/data/'+this.formValidate._id,
	                        	data:this.formValidate
	                        }).then(response=>{
								this.getData()
	                        })
	                    } else {
	                        this.$Message.error('表单验证失败!');
	                    }
	                })
	           }else{
	            	this.$refs[name].validate((valid) => {
	                    if (valid) {                  
	                    		this.$http({
		                   			method:"POST",
		                   			url:"http://localhost:3000/users/data",
		                   			data:this.formValidate
		                   		}).then(res=>{
		                   			this.formValidate=res.data                 			
		                   		})
	                        //添加数据	                   		
	                   		this.$Message.success('提交成功!');
	                    } else {
	                        this.$Message.error('表单验证失败!')  ;
	                    }
	                })
	            }
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
        	ok () {
                this.$Message.info('点击了确定');
            },
            cancel () {
                this.$Message.info('点击了取消');
            },
        	addData(){
        		this.modal1 = true
        	},
            show (index) {
                this.$Modal.info({
                    title: '用户信息',
                   	content: `标题：${this.list[index].title}<br>姓名：${this.list[index].author}<br>副标题：${this.list[index].Games}<br>内容：${this.list[index].content}`
                })
            }
        }
    }
</script>